<template>
<div 
    class="scroll-el-container"
    ref="ScrollEl"
    :style="{
        height:height,
        width:width,
    }">
    <slot></slot>
</div>
</template>
<script>
/*
 滚动容器组件（解决页面切换时不记录组件滚动条的情况）
 */
import {simpleRoll} from "@/common/RollTolls";
export default {
    name: 'ScrollEl',
    props:{
        height:String,  //高度
        width:String,  //宽度
    },
    data() {
        return {
            scrollTop:0,
        }
    },
    watch:{
        $route(){
            const ScrollEl = this.$refs.ScrollEl;
            if(!ScrollEl) return;
            ScrollEl.scrollTop = this.scrollTop;
        },
    },
    mounted(){
        const ScrollEl = this.$refs.ScrollEl;
        ScrollEl.addEventListener('scroll',()=>{
            this.scrollTop = ScrollEl.scrollTop;
        });
    },
    methods:{
        startRoll(end=0,time = 100){
            const ScrollEl = this.$refs.ScrollEl;
            if(!ScrollEl) return;
            simpleRoll({
                end,time,
                target:ScrollEl,
            });
        },
    },
}
</script>
<style scoped lang="scss">
.scroll-el-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
</style>
